<template>
  <div class="container">
    <div class="cheader1">我的社区</div>
    <div class="mbox1">
      <div class="m1-1">总业绩(USDT)</div>
      <div class="m1-2">{{ infos.communityFuelRecharge }}</div>
      <div class="m1-3">
        <div class="m1-3-item">
          <div class="m1-3-item-1">当前等级</div>
          <div class="m1-3-item-2">{{ infos.level }}</div>
        </div>
        <div class="m1-3-item">
          <div class="m1-3-item-1">直推人数</div>
          <div
            class="m1-3-item-2 xian"
            @click="handleToRecommend(1, infos.directInvitationCount)"
          >
            {{ infos.directInvitationCount }}
          </div>
        </div>
        <div class="m1-3-item">
          <div class="m1-3-item-1">间推人数</div>
          <div
            class="m1-3-item-2 xian"
            @click="handleToRecommend(2, infos.indirectInvitationCount)"
          >
            {{ infos.indirectInvitationCount }}
          </div>
        </div>
      </div>
      <!-- <div class="m1-4">距离下一等级还需</div>
      <div class="m1-5">{{ infos.nextLevelQuantity }}USDT</div> -->
      <div class="m1-6" @click="toShare">立即邀请</div>
    </div>
    <div class="sbox" style="padding: 0 8px">
      <van-search
        v-model="searchUserID"
        placeholder="请输入要查询的用户ID"
        @search="onSearch"
      />
      <van-tabs
        v-model:active="tabIndex"
        sticky
        shrink
        title-inactive-color="#878B97"
        title-active-color="#000"
        color="#000"
        line-width="20px"
        background="#fff"
      >
        <van-tab title="总业绩">
          <div class="mul" style="padding: 0 20px">
            <div class="mli" v-for="item in nodeList" :key="item.id">
              <card-item
                :propItems="nodePropItems"
                :detail="item"
                @handleClick="handleClick"
              ></card-item>
            </div>
          </div>
          <van-empty
            v-if="!nodeList.length"
            description="暂无数据"
            image-size="100"
            :image="require('@/assets/images/null.png')"
          />
        </van-tab>
        <van-tab title="奖励明细">
          <div class="libox" v-for="(item, index) in rewardList" :key="index">
            <card-item :propItems="rewardPropItems" :detail="item"></card-item>
          </div>
          <van-empty
            v-if="!rewardList.length"
            description="暂无数据"
            image-size="100"
            :image="require('@/assets/images/null.png')"
          />
        </van-tab>
      </van-tabs>
    </div>
  </div>
  <van-dialog v-model:show="userShow" title="查询信息">
    <div class="dbox" style="padding: 20px 14px">
      <card-item :propItems="nodePropItems" :detail="detailItem"></card-item>
    </div>
  </van-dialog>
  <no-register />
</template>
    
<script setup lang='ts'>
import { reactive, onMounted, computed, ref, watch } from "vue";
import CardItem from "@/components/CardItem/index.vue";
import NoRegister from "@/components/NoRegister";
import { useRouter } from "vue-router";
import { useStore } from "@/store";
import http from "@/utils/http";
const store = useStore();
const router = useRouter();
const searchUserID = ref("");
const userShow = ref(false);
const tabIndex = ref(0);
const infos = computed(() => store.state.users.infos);
const detailItem = ref<any>({});
const rewardList = ref<any>([]);
onMounted(() => {
  if(infos.value.isLogin !== false){
    store.dispatch("users/updateUserInfo");
  }
});
const nodeList = ref<any[]>([]);
const onSearch = async (val: string) => {
  userShow.value = true;
  searchUserID.value = "";
  const ret: any = await http.get("user/user/child/" + val);
  if (ret.code === 0) {
    detailItem.value = ret.data;
  }
};
const getTabList1 = async () => {
  const ret: any = await http.get("user/user/all/child/0");
  if (ret.code === 0) {
    nodeList.value = ret.data;
  }
};
const getTabList2 = () => {
  http
    .post("user/fuel_receive_dividends/app/page", {
      current: 1, //页数
      size: 500, //每页条数
      isAllChild: 1,
    })
    .then((res: any) => {
      if (res.code === 0) {
        rewardList.value = res.data.records;
      }
    });
};
watch(
  tabIndex,
  (newVal, oldVal) => {
    if (newVal === 0) {
      getTabList1();
    } else {
      getTabList2();
    }
  },
  {
    immediate: true,
  }
);

const nodePropItems = reactive([
  {
    name: "用户ID",
    prop: "id",
    copy: true,
    underline: true,
  },
  {
    name: "上级ID",
    prop: "parentId",
    copy: true,
  },
  {
    name: "伞下燃料购买总额",
    prop: "rechargeQuantity",
    ryz: true,
  },
  {
    name: "伞下燃料消耗总额",
    prop: "fuelQuantity",
    ryz: true,
  },
  {
    name: "当前持有燃料数量",
    prop: "fuelBalance",
    ryz: true,
  },
  {
    name: "等级",
    prop: "level",
  },
  {
    name: "社区人数",
    prop: "communityCount",
  },
  {
    name: "注册时间",
    prop: "createTime",
  },
]);
const handleClick = (data: any) => {
  console.log("data", data);
  if (data.key === "id") {
    router.push({
      path: "/node/nodelist",
      query: {
        id: data.value,
      },
    });
  }
  if (data.key === "achievementQuantity") {
    router.push({
      path: "/node/achievement",
      query: {
        id: data.uid,
      },
    });
  }
};
const rewardPropItems = reactive([
  {
    name: "类型",
    prop: "type",
  },
  {
    name: "用户ID",
    prop: "userId",
    copy: true,
  },
  {
    name: "奖励(USDT)",
    prop: "fuelQuantity",
  },
  {
    name: "比例(%)",
    prop: "fuelProportion",
  },
  {
    name: "时间",
    prop: "createTime",
  },
]);
const handleToRecommend = (type: number, num: number) => {
  if (num > 0) {
    router.push({
      path: "/node/recommendlist",
      query: {
        type: type === 1 ? "zhitui" : "jiantui",
      },
    });
  }
};
const toShare = () => {
  router.push("/share");
};
</script>
    
<style lang="scss" scoped>
.mbox1 {
  padding: 14px 20px 0;
  .m1-1 {
    font-size: 15px;
    color: #878b97;
  }
  .m1-2 {
    font-size: 28px;
    font-weight: 600;
    color: #000;
    margin: 20px 0;
  }
  .m1-3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
    .m1-3-item {
      display: flex;
      flex-direction: column;
      text-align: center;
      .m1-3-item-1 {
        font-size: 13px;
        color: #878b97;
        margin-bottom: 14px;
      }
      .m1-3-item-2 {
        font-size: 13px;
        color: #000;
      }
    }
  }
  .m1-4 {
    font-size: 12px;
    color: #878b97;
    margin: 30px 0 10px;
  }
  .m1-5 {
    font-size: 12px;
    color: #36b4ea;
  }
  .m1-6 {
    width: 100%;
    height: 40px;
    background: #36b4ea;
    color: #fff;
    text-align: center;
    letter-spacing: 1px;
    line-height: 40px;
    border-radius: 4px;
    margin: 40px 0 20px;
    font-size: 14px;
  }
}
.mbox2 {
  padding: 14px;
  .m2-1 {
    font-size: 15px;
    color: #000;
  }
}
.mli {
  padding: 10px 0;
  border-bottom: 1px solid #f1f1f1;
}
.xian {
  text-decoration: underline;
}
.libox {
  padding: 10px 20px;
  border-bottom: 1px solid #f1f1f1;
}
</style>